<template>
  <div class="main">
    <div class="login_box" :class="{ show: shoewLogin }">
      <div class="img_box">
        <img src="./assets/img/headport.jpg" alt="" />
      </div>
      <h3>就诊预约系统</h3>
      <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef">
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
            prefix-icon="el-icon-unlock"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-radio-group v-model="type">
            <el-radio :label="1">用户</el-radio>
            <el-radio :label="2">管理员</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="lohginConfirm">登录</el-button>
      <el-button type="primary" @click="goRegister">注册</el-button>
    </div>

    <div class="register_box" v-show="showRegister">
      <el-form :model="registerForm" ref="registerRef" :rules="loginRules">
        <el-card>
          <h3>就诊预约系统（注册）</h3>
          <!-- <el-form-item>
            <el-input
              v-model="registerForm.name"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item> -->
          <el-form-item prop="username">
            <el-input
              v-model="registerForm.username"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="registerForm.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item>
            <el-input
              v-model="registerForm.email"
              placeholder="请输入邮箱"
            ></el-input>
          </el-form-item> -->
          <el-form-item>
            <el-input
              v-model="registerForm.jobNumber"
              placeholder="请输入工号"
            ></el-input>
          </el-form-item>
          <el-button type="primary" @click="registConfirm">立即注册</el-button>
          <el-button type="success" @click="back">返回登录 --></el-button>
        </el-card>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 5,
            max: 20,
            message: '长度在 5 到 20 个字符',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 1,
            max: 20,
            message: '长度在 6 到 20 个字符',
            trigger: 'blur'
          }
        ]
      },
      shoewLogin: false,
      showRegister: false,
      registerForm: {
        username: '',
        password: '',
        jobNumber: ''
      },
      type: 1
    }
  },
  methods: {
    lohginConfirm () {
      this.$refs.loginFormRef.validate((valid) => {
        if (valid) {
          if (this.type === 1) {
            this.$http
              .post('/api/users/login', this.loginForm)
              .then((res) => {
                if (res.status !== 200) return this.$message.error('账号或密码错误！请重新登录')
                console.log(res)
                const menu = JSON.stringify(res.data.user.menu)
                window.sessionStorage.setItem('token', res.data.token)
                window.sessionStorage.setItem('doctorID', res.data.user.doctorID)
                window.sessionStorage.setItem('jobNumber', res.data.user.jobNumber)
                window.sessionStorage.setItem('menu', menu)
                this.$router.push('/home')
                this.$message.success('登陆成功')
              })
          } else {
            this.$http.post('/api/admin/login', this.loginForm).then((res) => {
              console.log(res)
              if (res.status !== 200) { return this.$message.error('账号或密码错误！请重新登录') }
              const menu = JSON.stringify(res.data.menu)
              window.sessionStorage.setItem('token', res.data.token)
              window.sessionStorage.setItem('menu', menu)
              this.$router.push('/home')
              this.$message.success('登陆成功')
            })
          }
        }
      })
    },
    goRegister () {
      this.showRegister = 'true '
      this.shoewLogin = 'true'
    },
    registConfirm () {
      this.$refs.registerRef.validate(async (valid) => {
        if (!valid) return
        await this.$http
          .get('/server/doctor/doctorInfo/' + this.registerForm.jobNumber)
          .then((res) => {
            if (res.status !== 200) {
              return this.$message.error('工号错误请重新输入')
            }
            const doctorID = res.data._id
            this.$http
              .post('/api/users/register/' + doctorID, this.registerForm)
              .then((res) => {
                if (res.status !== 200) {
                  return this.$message.error('用户名重复请重新输入')
                }
                this.$message.success('注册成功')
                this.shoewLogin = false
                this.showRegister = false
              })
          })
      })
    },
    back () {
      this.shoewLogin = false
      this.showRegister = false
    }
  }
}
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: -webkit-linear-gradient(
    135deg,
    rgb(255, 153, 195),
    rgb(233, 255, 189)
  );
}
.login_box {
  width: 600px;
  height: 400px;
  background: #fff;
  opacity: 0.7;
  text-align: center;
  position: relative;
  border-radius: 30px;
}
.login_box .img_box {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login_box .img_box img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: block;
  padding: 8px;
  background-color: lightblue;
  margin-top: -60px;
}
.el-input__inner,
.el-input {
  width: 400px !important;
}
.el-form {
  padding: 80px 100px 0 100px;
}
.el-button {
  margin-top: 5px;
  /* position: absolute; */
  /* bottom: 40px; */
  /* right: 50%;
  transform: translateX(50%); */
  width: 150px;
  transition: 0.3s;
}
.el-button:hover {
  background: -webkit-linear-gradient(
    135deg,
    rgba(0, 200, 255, 0.6),
    rgba(255, 0, 13, 0.85)
  );
}
.register_box {
  width: 400px;
  height: auto;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 5px 5px 10px #999;
}
.register_box .el-input {
  width: 100% !important;
}
.register_box .el-form {
  padding: 0;
}
.register_box .el-form .el-card {
  width: 100%;
  height: 100%;
  border-radius: 15px;
}
.show {
  display: none;
  transition: 0.5s;
}
.el-form{
  padding: 40px 100px 0px 100px;
}
.register_box h3{
  margin-bottom: 40px;
  color: lightskyblue;
}
.register_box .el-form .el-card .el-button{
  border-radius: 25px;

}
</style>
